import React, { Component } from 'react';
import {
  StyleSheet, Text, View, ScrollView, DeviceEventEmitter,
} from 'react-native';
import produce from 'immer';
import theme from '../../../../native-base-theme/variables';
import * as techDocService from '../../../../services/techDoc';
import { UtilToast } from '../../../../utils/util-method';

class TechPerformance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [],
    };
  }

  componentDidMount() {
    this.getDatas();
  }

  // 获取技术性能信息
  getDatas = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const { datas } = this.props;
      if (datas && datas.objType) {
        const data = await techDocService.getTechPerformance({ objType: datas.objType });
        // const data = await techDocService.getTechPerformance({ objType: 'RX_240ZLJZKGZZ' });
        DeviceEventEmitter.emit('showLoading', false);
        if (data && data.length > 0) {
          this.setState(produce(draft => {
            draft.datas = data;
          }));
        } else {
          UtilToast('该设备暂无技术性能信息', 'danger');
        }
      } else {
        DeviceEventEmitter.emit('showLoading', false);
        UtilToast('没有设备信息', 'danger');
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.containerView}>
          {
            this.state.datas.map((data, index) => (
              <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 4, marginBottom: 4 }} key={index}>
                <View style={{ flex: 1 }}>
                  <Text style={{ color: 'white' }}>
                    {data.perfItemName} :
                  </Text>
                </View>
                <View style={{ flex: 1, flexDirection: 'row', marginLeft: 8 }}>
                  <Text style={{ color: 'white' }}>
                    { data.valueType == 1 ? (<Text style={{ color: 'white' }}>{data.value}</Text>)
                      : (<Text style={{ color: 'white' }}>{data.minValue}~{data.maxValue}</Text>)
                    }
                  </Text>
                  <Text style={{ color: 'white', marginLeft: 8 }}>
                    {data.unit}
                  </Text>
                </View>
              </View>
            ))
          }
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.myPrimary,
    flexDirection: 'column',
    padding: 8,
  },
  containerView: {
    flex: 1,
  },
  title: {
    color: 'black',
    fontSize: 17,
    marginTop: 8,
  },
});

export default TechPerformance;
